import { Radio, Checkbox } from 'antd';
import React, { useState, useEffect, memo } from 'react';
import '@ant-design/compatible/assets/index.css';
import { connect } from 'dva'
import styles from './AuditForms.less';

const PaymentMethod = props => {
    const { allDatas, amount } = props;
    const [checkedValues, setCheckedValues] = useState({ payMethods: ['1'], coupon: 'one' });//选中的收款方式和优惠券

    const [ischange, setIschange] = useState(false)
    useEffect(() => {
        if (['100', '200', '300', '400'].indexOf(String(amount)) > -1) {
            setIschange(false);
        } else {
            setCheckedValues({ ...checkedValues, payMethods: ['1'] })
            setIschange(true);
        }
    }, [amount])
    let paymentMethodList = [
        { label: '现金', value: '1', disabled: true },
        // { label: '优惠券', value: '2', disabled: ischange },
    ];

    useEffect(() => {
        props.dispatch({
            type: 'auditDetail/changePayMethods',
            payload: { payMethods: checkedValues }
        })
    }, [checkedValues])

    const onChange = checkedArr => { // 选择收款方式
        console.log('radio checked', checkedArr);
        setCheckedValues({ ...checkedValues, payMethods: checkedArr })
    };
    const onCoupon = e => { // 选择优惠券

        console.log('radio checked', e.target.value);
        setCheckedValues({ ...checkedValues, coupon: e.target.value })
    };

    return (
        <div className="formItems">
            <div style={{ marginBottom: '30px' }}>
                支持的收款方式：
        <div style={{ marginLeft: '30px', display: 'inline-block' }}>
                    <Checkbox.Group options={paymentMethodList} value={checkedValues.payMethods} onChange={onChange} />
                </div>
            </div>
            {/* <div style={{ display: checkedValues.payMethods.includes('2') ? 'block' : 'none' }}>
                请选择 <span style={{ color: '#fc9d0b' }}>{amount}</span> 元现金对应的优惠券额度：
                <Radio.Group style={{ marginLeft: '30px' }} onChange={onCoupon} value={checkedValues.coupon}>
                    <Radio value={'one'}>100元优惠券</Radio>
                    <Radio value={'two'}>200元优惠券</Radio>
                    <Radio value={'three'}>300元优惠券</Radio>
                    <Radio value={'four'}>400元优惠券</Radio>
                </Radio.Group>
            </div> */}
        </div>
    );
};
/**
 * 优化渲染
 */
function carefulRender(prevProps, nextProps) {
    if (JSON.stringify(prevProps) != JSON.stringify(nextProps)) {
        return false
    } else {
        return true
    }
}


export default memo(connect(state => state.auditDetail)(PaymentMethod), carefulRender);
